<template>
  <div>
    <el-drawer :visible.sync="insertSupportV" size="36%">
      <el-form ref="queryCondition" :model="queryCondition" label-width="auto">
        <el-row :gutter="12">
          <el-col :span="6" :offset="1">
            <el-form-item prop="materialKeyWord" label="名称">
              <el-input v-model.trim="queryCondition.materialKeyWord">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="queryByCondition(1)"
                >查询
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label-width="0">
              <el-button
                type="warning"
                icon="el-icon-refresh"
                @click="() => $refs.queryCondition.resetFields()"
              >
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="results"
        ref="supportTable"
        min-height="560px"
        stripe
        @selection-change="(rows) => (supported = rows)"
      >
        <el-table-column type="selection" align="center"></el-table-column>

        <el-table-column prop="materialCode" label="ID/Code"></el-table-column>
        <el-table-column prop="materialLabel" label="名字"></el-table-column>
        <el-table-column prop="materialType" label="类型"></el-table-column>

        <el-table-column
          label="suggestPrice"
          :formatter="suggestPriceFormat"
          align="center"
        >
        </el-table-column>
        <el-table-column width="180px" fixed="left">
          <template #default="{ row }">
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              @click="openById(row.materialCode)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :total="total"
        :page-size="queryCondition.pageSize"
        :current-page.sync="queryCondition.pageNum"
        @current-change="queryByCondition"
        layout="total, prev, pager, next, jumper"
      ></el-pagination>
      <el-button type="primary" @click="addSupports">添加</el-button>
    </el-drawer>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *"total": 8,
 "results": [
 {
      "materialCode": "MT003",
      "materialLabel": "示波器",
      "suggestPrice": 256.66,
      "materialType": "machine"
    },
 *
 */
import { basic } from "@/api";

// import New from './components/New.vue';
export default {
  name: "ShoppingGoodsSupport",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      insertSupportV: false,
      queryCondition: {
        materialKeyWord: "",
        pageNum: 1,
        pageSize: 10,
      },
      results: [],
      supported: [],
      total: 0,
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.queryByCondition(1);
  },
  methods: {
    sampleM() {},
    addSupports() {
      console.log(this.supported);
      this.$emit("post-select", this.supported);
      this.$nextTick(() => {
        this.insertSupportV = false;
      });
      this.$refs.supportTable.clearSelection();
    },
    appear() {
      this.insertSupportV = true;
    },
    suggestPriceFormat(row) {
      return row.suggestPrice.toFixed(2);
    },
    sizeChange(innerPageSize) {
      this.pageSize = innerPageSize;
      console.log("xxxxxx");
      this.queryByCondition();
    },
    queryByCondition(pageNum) {
      if (pageNum) this.queryCondition.pageNum = pageNum;
      //todo: arrange into apis
      // this.$http({
      //   method: "post",
      //   url: "http://localhost:9090/swimming/material/query",
      //   data: this.queryCondition,
      // })
      basic.materialQuery(this.queryCondition).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query error: " + error.response.status);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
